import * as React from "react";
import * as ReactDOM from "react-dom";

import "./OrderGoodsDetail.less";
import NavBar from "../Components/NavBar/NavBar";
import {ProductModel} from "../../model/ProductModel";


export interface OrderGoodsDetailProps {

}

export interface State extends ProductModel {
    isShowSKu: boolean
}

export default class OrderGoodsDetail extends React.Component<OrderGoodsDetailProps, State> {
    //默认属性
    static readonly defaultProps: OrderGoodsDetailProps = {};

    constructor(props: OrderGoodsDetailProps) {
        super(props);
        //默认状态
        this.state = {
            title: '维一植物精油',
            thumb: 'http://haijisz8.hyxmt.cn/Files/image/2017032910284099.jpg',
            yprice: 43.00,
            marketprice: 49.00,
            id: '154xddsds',
            unit: '个',
            description: '植物精油-1',
            content: 'assssssssss',
            total: 0,
            totalcnf: 0,
            isShowSKu: false
        };
    }

    //组件挂载后回调
    componentDidMount() {
        document.title = "商品详情";

    }

    render() {
        return <div className="OrderGoodsDetail">
            <NavBar title={'商品详情'} searchClick={() => {
            }}/>

            <img src={this.state.thumb} alt={this.state.title} className="cover"/>

            <div className="info">
                <p className="title">{this.state.title}</p>
                <p className="desc">{this.state.description}</p>
                <p className="price">￥{this.state.marketprice}</p>
            </div>

            <div className="sku">
                <div className={`sku-title ${this.state.isShowSKu ? 'show-sku' : ''}`} onClick={() => {
                    this.setState({isShowSKu: !this.state.isShowSKu})
                }}>
                    <span>包装规格</span>
                    <div className="iconfont icon-jiantou"/>
                </div>
                {this.state.isShowSKu ? <>
                    <div className="sku-item strong">
                        <strong>规格</strong>
                        <strong>包装数量</strong>
                        <strong>操作</strong>
                    </div>
                    <div className="sku-item">
                        <span>箱</span>
                        <span>30</span>
                        <span className={'fun'}>
                        <button className="btn btn-reduce">-</button>
                        <input type="number" value={this.state.total || 0}/>
                        <button className="btn btn-add">+</button>
                    </span>
                    </div>
                </> : null}
            </div>

            <div className="order-number">
                <div>
                    <span>订货数量</span>
                </div>
                <div className="">
                    <p>合计: <strong className="red">￥43.00</strong>*0=<strong className="red">￥0.00</strong></p>
                    <p>库存数量：15454</p>
                    <p className={'select'}>
                        下单方向:
                        <select name="">
                            <option value="直接向总部-公司发货">直接向总部-公司发货</option>
                        </select>
                    </p>
                </div>
            </div>

            <article>
                详情
            </article>

            <footer>
                <button className={'btn btn-watch'} onClick={() => {
                    location.hash = '#/cart'
                }}>查看进货单
                </button>
                <button className={'btn btn-add'}>加入进货单</button>
            </footer>

        </div>
    }
}
